import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import moment from 'moment';
import { DATA_ENTRY, AdvancedSearch, NoQueryC, ContentPackage } from '../../../comps';
import Barra from './Barra/index'; // 模型为Barra时展示的组件

@connect(({ riskAttributionM, yieldPerformanceM, globalM }) => ({
  riskAttributionM,
  yieldPerformanceM,
  globalM,
}))
export default class RiskAttributionC extends PureComponent {
  state = {
    productData: undefined, //选中产品的值
    disabled: true, // 查询条件置灰
    beginDate: undefined, // 传入各组件的时间
    endDate: undefined, // 传入各组件的结束时间
    timeRange: undefined, // 传入各组件的时间类型
    portfolioCode: '', // 传入各组件的产品code
    hasDataBD: undefined, // 开始时间不可选范围
    hasDataED: undefined, // 结束时间不可选范围
    isShow: false, // 是否展示详细信息
    setupModel: undefined, // 模型设置的值
    isModel: true, // 模型设置是否置灰
    modelSelectData: [], // 模型设置下拉数据
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const {
      globalM: {
        dataDictionary: { ATTRIBUTION_MODEL = [], MAAT_PRODUCT_INVE_TYPE = [] },
      },
    } = this.props;
    dispatch({
      // 调用字典获取模型设置下拉数据 和产品类型 权益类还是固收类
      type: 'riskAttributionM/getModelData',
      payload: {
        ATTRIBUTION_MODEL,
        MAAT_PRODUCT_INVE_TYPE,
      },
    });
  }
  //获取该产品的创建时间与结束时间
  queryProductTime = () => {
    let promise = new Promise((resolve, reject) => {
      this.props.dispatch({
        type: 'riskAttributionM/queryProductTime',
        payload: {
          portfolioCode: this.state.productData,
          timeRange: this.state.timeRange,
        },
        callback: (data) => {
          if (data) {
            resolve(data);
          } else {
            reject();
          }
        },
      });
    });
    return promise;
  };
  //时间区间选择改变事件
  selOnChange = (value) => {
    const { productData } = this.state;
    this.setState(
      {
        timeRange: value == '0' ? '6' : value,
      },
      () => {
        if (value !== '0') {
          //非自定义
          if (productData && productData.length) {
            this.queryProductTime().then(
              (res) => {
                const data = res.data;
                this.state.COMPLEXDATE.setSelctAndDate(value, moment(data.beginDate), moment(data.endDate));
              },
              (reject) => {
                this.state.COMPLEXDATE.setSelctAndDate(value, null, null);
              },
            );
          } else {
            message.error('请选择产品');
          }
        } else {
          //选择自定义
          this.queryProductTime().then(
            (res) => {
              const data = res.data;
              this.state.COMPLEXDATE.setSelctAndDate(value, null, null);
              this.setState({
                hasDataBD: moment(data.beginDate),
                hasDataED: moment(data.endDate),
              });
            },
            (reject) => {
              this.state.COMPLEXDATE.setSelctAndDate(value, null, null);
            },
          );
        }
      },
    );
  };

  //搜索点击事件
  searchData = (e) => {
    const { dispatch } = this.props;
    if (e.product) {
      if (e.begin1 && e.begin2 && e.setModel) {
        this.setState({
          portfolioCode: this.state.productData, // 产品Id
          beginDate: e.begin1.format('YYYY-MM-DD'),
          endDate: e.begin2.format('YYYY-MM-DD'),
          setupModel: e.setModel, // 模型设置
          isShow: true, // 判断是否展示页面的条件
          timeStamp: new Date().getTime(), //时间戳  只要点击就重新请求
        });
        // dispatch({//查询当前条件下是否有数据
        //   type: "riskAttributionM/benchData",
        //   payload: {
        //     portfolioCode: this.state.productData,    // 产品Id
        //     beginDate: e.begin1.format("YYYY-MM-DD"),
        //     endDate: e.begin2.format("YYYY-MM-DD"),
        //     setupModel: e.setModel,
        //   },
        //   callback: res => {
        //     if (res) {
        //       this.setState({
        //         index: e.complextdate1,                   // 时间类型
        //         portfolioCode: this.state.productData,    // 产品Id
        //         beginDate: e.begin1.format("YYYY-MM-DD"),
        //         endDate: e.begin2.format("YYYY-MM-DD"),
        //         setupModel: e.setModel,                    // 模型设置
        //         isShow: true                               // 判断是否展示页面的条件
        //       });
        //     }
        //   }
        // });
      } else {
        message.warning('请填写完整的查询条件');
        this.setState({
          beginDate: undefined,
          endDate: undefined,
          setModel: undefined,
        });
      }
    } else {
      message.warning('请选择选择产品');
    }
  };

  // 产品改变事件
  changePortfolio = (e) => {
    if (e) {
      const data = e.info;
      const {
        dispatch,
        riskAttributionM: { modelData, MAAT_PRODUCT_INVE_TYPE },
      } = this.props;

      // maat和资管 的资产类型字典不一致，所以单独请求字典获取枚举值根据value值判断
      const t = MAAT_PRODUCT_INVE_TYPE.filter((x) => x.code == data.inveType)[0]?.value;

      if (data.inveType && data.inveType !== null) {
        if (t == '权益类') {
          // 权益类 展示 Barra
          this.setState(
            {
              modelSelectData: [modelData[2]], // 默认展示下拉框内首条
              isModel: false,
            },
            () => {
              const { modelSelectData } = this.state;
              this.ModelSet.props.form.setFieldsValue({
                setModel: modelSelectData.length ? modelSelectData[0].value : '', // 产品切换时重新设置模型设置默认值
              });
            },
          );
        } else {
          // 其他类型
          message.warning('暂不支持该产品的投资类型');
          this.setState(
            {
              modelSelectData: [],
              isModel: true,
            },
            () => {
              this.ModelSet.props.form.setFieldsValue({
                setModel: '', // 清空模型设置默认值
              });
            },
          );
        }
      } else {
        message.warning('该产品未设置投资类型，请至“产品概览”模块进行设置');
        this.setState(
          {
            modelSelectData: [],
            isModel: true,
          },
          () => {
            this.ModelSet.props.form.setFieldsValue({
              setModel: '', // 没有投资类型是清空模型设置默认值
            });
          },
        );
      }
      dispatch({
        type: 'yieldPerformanceM/findProductTime',
        payload: {
          portfolioCode: data.portfolioCode,
          timeRange: '4',
        },
        callback: (res) => {
          const data = res.data;
          if (data !== null) {
            this.state.COMPLEXDATE.setSelctAndDate('4', moment(data.beginDate), moment(data.endDate));
            this.setState({
              timeRange: '4',
              beginDate1: data.beginDate,
              endDate1: data.endDate,
            });
          } else {
            message.warning('该产品无开始日期');
            this.state.COMPLEXDATE.setSelctAndDate('4', null, null);
            this.setState({
              disabled: true,
            });
          }
        },
      });
      this.setState({
        disabled: true,
      });
      this.setState({
        disabled: false,
        productData: data.portfolioCode,
        portfolioName: data.portfolioName,
        hasDataBD: moment(data.selectStartDate),
        hasDataED: moment(data.selectEndDate),
      });
    } else {
      this.state.COMPLEXDATE.setSelctAndDate('', '', '');
      this.ModelSet.props.form.setFieldsValue({
        setModel: '', // 产品切换时重新设置模型设置默认值
      });
      this.setState({
        // portfolioCode: "",
        isModel: true,
        disabled: true,
      });
    }
  };
  // 根据模型类别展示不同页面
  showContent = () => {
    const { portfolioCode, setupModel } = this.state;
    const args = {
      portfolioCode: portfolioCode, //证券代码
      timeRange: this.state.timeRange, //时间类型
      beginDate: this.state.beginDate, //开始时间
      endDate: this.state.endDate, //结束时间
      setupModel: this.state.setupModel, //模型
    };
    switch (
      setupModel // 根据不同的模型展示不同的页面
    ) {
      default:
        return <Barra args={args} timeStamp={this.state.timeStamp} />;
    }
  };

  render() {
    const { modelSelectData, isShow } = this.state;
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'product',
          title: '产品',
          type: DATA_ENTRY.PRODUCTLIST,
          dataType: 2,
          onChange: (e) => this.changePortfolio(e),
        },
        {
          selectIndex: 'complextdate1',
          startIndex: 'begin1',
          endIndex: 'begin2',
          title: '时间区间',
          type: DATA_ENTRY.COMPLEXDATE,
          hasDataBD: this.state.hasDataBD,
          hasDataED: this.state.hasDataED,
          disabled: this.state.disabled,
          selOnChange: this.selOnChange, // 时间类型改变事件
          onRef: (ref) => this.setState({ COMPLEXDATE: ref }),
        },
        {
          dataIndex: 'setModel',
          title: '模型设置',
          initialValue: modelSelectData.length ? modelSelectData[0].value : '',
          type: DATA_ENTRY.SELECT,
          dataSource: modelSelectData,
          form: this.props.form,
          disabled: this.state.isModel,
          onRef: (ref) => {
            this.ModelSet = ref;
          },
        },
      ],
      onQuery: (e) => {
        this.searchData(e);
      },
      onClear: () => {
        this.state.COMPLEXDATE.setSelctAndDate('', '', ''); // 重置时清空时间类型组件的值
        const { form } = this.props;
        form?.resetFields(); // 清空表单
        this.setState({
          isModel: true, // 模型设置置灰
          modelSelectData: [], // 模型设置下拉选项清空
        });
      },
    };
    return (
      <ContentPackage
        title='风险归因'
        contentHtml={
          <div style={{ padding: '0 15px' }}>
            <div>
              <AdvancedSearch {...searchProps} />
            </div>
            {isShow ? (
              <>{this.showContent()} </> // 满足条件时展示页面
            ) : (
              <div style={{ marginTop: '20px' }}>
                <NoQueryC />
              </div>
            )}
          </div>
        }
      />
    );
  }
}
